<script setup lang="ts">
import {defineProps, onMounted, ref, watch} from "vue";
import router from "../router";
import Change_card from "@/items/rank_items/change_card.vue";
import play_views from "@/items/video_items/play_views.vue";
interface Movie {
  MID: string;
  fanart: string;
  poster: string;
  type: string;
  length: string;
  name: string;
  score: string;
  play_count:string;
  update_time:string;
  comment_count:string;
}

const movieData = ref<Movie[]>([]);
const toMID = ref(''); // 定义 ref
const onshow = ref(false);

// 将长度字段转换为小时：分钟格式
const formatLength = (length: string): string => {
  const minutes = parseInt(length);
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;
    return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:00`;
  } else {
    return `${minutes}分钟`;
  }
};

// 将日期时间字符串转换为日期字符串
const formatDate = (datetime: string): string => {
  return datetime.split(' ')[0];
};

const fetchMovieData = async (MID) => {
  toMID.value = MID;
  try {
    const response = await fetch('https://movie.cpb2013.top/movie_info.php?MID='+toMID.value);
    const responseData = await response.json();
    // console.log(responseData);
    if (responseData.status === 'ok') {
      movieData.value = responseData.data.map((movie: any) => ({
        MID: movie.MID,
        fanart: movie.fanart,
        poster: movie.poster,
        type: movie.type,
        length: formatLength(movie.length),
        name: movie.name,
        score: movie.score,
        play_count: movie.play_count,
        update_time: formatDate(movie.update_time),
        comment_count:movie.comment_count,
      }));
      // console.log(movieData.value[0]);
      // console.log(responseData);
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

onMounted(() => {
  fetchMovieData(toMID.value);
});



// watch(() => props.toMID, (newtoMID) => {
//   toMID.value = props.toMID;
//   fetchMovieData();
// });

// defineProps({
//   toMID: String,
// });

// 定义 props
const props = defineProps({
  toMID: {
    type: String,
    required: true, // 将 prop 标记为必需的
  },
});

toMID.value = props.toMID;
// console.log(toMID.value);
// console.log(toMID)
const GoMovie = (MID: string) => {
  console.log('chick')
  router.push({ path: 'movie_play', query: { MID } });
}

watch(() => props.toMID, (newMID) => {
  fetchMovieData(newMID);
});

const openEditDialog = () => {
  onshow.value = true;
}

const closeEditDialog = () => {
  onshow.value = false;
}



</script>

<template>
<view>

    <view v-if="movieData.length > 0" class="W_Main_cen_video_card_main">
      <view class="W_Main_cen_video_card_img">
        <view>
          <el-image :src="movieData[0].fanart" style="width: 300px; height: 173px;border-radius: 20px;" fit="cover" @click="openEditDialog"/>
        </view>
        <view class="W_Main_cen_video_card_img_info">
          <view class="W_Main_cen_video_card_img_info_play">
            <font-awesome-icon icon="fa-brands fa-youtube" style="color: #ffffff; margin-right: 5px" />{{movieData[0].play_count}}
          </view>
          <view class="W_Main_cen_video_card_img_info_comment">
            <font-awesome-icon icon="fa-solid fa-rectangle-list" style="color: #ffffff; margin-right: 5px" />{{movieData[0].comment_count}}
          </view>
          <view class="W_Main_cen_video_card_img_info_time">
            <font-awesome-icon icon="fa-solid fa-stopwatch" style="color: #ffffff;margin-right: 5px" />{{movieData[0].length}}
          </view>
        </view>
      </view>
      <view class="W_Main_cen_video_card_name" @click="openEditDialog">
        {{movieData[0].name}}
      </view>
      <view class="W_Main_cen_video_card_bottom">
        <view class="W_Main_cen_video_card_up">
          <font-awesome-icon icon="fa-regular fa-square-caret-up" style="color: #b6b6b6; margin-right: 5px" />官方频道
        </view>
        <view class="W_Main_cen_video_card_time">
          {{movieData[0].update_time}}
        </view>
      </view>
    </view>
</view>
<view>
  <el-dialog v-model="onshow" title="预览" width="800px">
    <play_views :MID="toMID" @close-dialog="closeEditDialog"></play_views>
  </el-dialog>
</view>
</template>

<style scoped>
.W_Main_cen_video_card_main
{
  display: flex;
  flex-wrap: wrap;
  height: 190px;
  width: 300px;
  max-width: 300px;
}
.W_Main_cen_video_card_img
{
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  position: relative;
}
.W_Main_cen_video_card_img_info
{
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 12px 0px 12px 0px;
  background-color: rgba(222, 222, 222, 0.05); /* 半透明白色背景 */
}
.W_Main_cen_video_card_img_info_play
{
  display: flex;
  width: 20%;
  color: white;
  justify-content: center;
  margin-left: 10px;
}
.W_Main_cen_video_card_img_info_comment
{
  display: flex;
  justify-content: left;
  width: 60%;
  color: white;
  margin-left: 10px;
}
.W_Main_cen_video_card_img_info_time
{
  display: flex;
  width: 30%;
  color: white;
  justify-content: right;
  margin-right: 10px;
}
.W_Main_cen_video_card_name
{
  width: 100%;
  padding: 10px 0px 10px 0px;
  color: black;
  font-weight: 700;
  font-size: 18px;
}
.W_Main_cen_video_card_bottom
{
  width: 100%;
  color: #b6b6b6;
  font-size: 14px;
}
.W_Main_cen_video_card_time
{
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  margin-left: 12px;
}

.W_Main_cen_video_card_name {
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  transition: color 0.3s ease; /* 定义颜色过渡效果，持续时间为0.3秒，缓动函数为 ease */
}

/* 鼠标悬浮时改变字体颜色 */
.W_Main_cen_video_card_name:hover {
  color: lightskyblue;
}
</style>